<template>
  <el-form
    status-icon
    label-width="100px"
    class="demo-ruleForm"
    :model="passInfo"
    :rules="rules"
    ref="ruleForm"
  >
    <el-form-item prop="oldPass">
      <span slot="label">
        <span style="color:red; padding-right:5px;">*</span>
        <span>原始密码</span>
      </span>
      <el-input
        type="password"
        show-password
        autocomplete="new-password"
        v-model.trim="passInfo.oldPass"
      ></el-input>
    </el-form-item>
    <el-form-item prop="newPass">
      <span slot="label">
        <span style="color:red; padding-right:5px;">*</span>
        <span>新密码</span>
      </span>
      <el-input
        show-password
        type="password"
        autocomplete="new-password"
        v-model.trim="passInfo.newPass"
      ></el-input>
    </el-form-item>
    <el-form-item prop="confirmPass">
      <span slot="label">
        <span style="color:red; padding-right:5px;">*</span>
        <span>新密码确认</span>
      </span>
      <el-input
        type="password"
        v-model.trim="passInfo.confirmPass"
        autocomplete="new-password"
        show-password
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "PwdChange",
  data() {
    return {
      passInfo: {
        oldPass: "",
        newPass: "",
        confirmPass: "",
      },
      rules: {
        oldPass: [
          {
            validator: (rule, value, callback) => {
              if (value === "") callback(new Error("请输入原始密码"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        newPass: [
          {
            validator: (rule, value, callback) => {
              if (value === "") callback(new Error("请输入新密码"));
              else if (this.passInfo.oldPass === this.passInfo.newPass)
                callback(new Error("新旧密码一样，抽风？"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        confirmPass: [
          {
            validator: (rule, value, callback) => {
              if (value === "") callback(new Error("请输入新密码"));
              else if (this.passInfo.newPass !== this.passInfo.confirmPass)
                callback(new Error("两次密码输入不一致"));
              else callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.ruleForm
        .validate()
        .then((res) => {
          // 验证成功
          this.$http({
            method: "post",
            url: "/user/pwdchange",
            data: {
              oldPwd: this.passInfo.oldPass,
              newPwd: this.passInfo.newPass,
            },
          }).then((res) => {
            // console.log("修改成功");
            this.$message({
              message: "修改成功",
              type: "success",
            });
          });
        })
        .catch((err) => {
          //验证失败
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.el-form
  width 400px
  .el-form-item
    .el-button
      margin-top 20px
      padding 10px 28px
</style>
